<template>
  <vc-viewer
    info-box
    :skyAtmosphere="false"
    :skyBox="false"
    :showCredit="false"
    :infoBox="false"
    :selectionIndicator="false"
    @ready="onViewerReady"
    ref="viewerRef"
  >
    <slot></slot>
  </vc-viewer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { VcViewer } from "vue-cesium";
import {
  MaterialAppearance,
  Material,
  BoxGeometry,
  Matrix4,
  Cartesian3,
  Transforms,
  GeometryInstance,
  Primitive,
  VertexFormat,
} from "cesium";
import EllipsoidTrailMaterialProperty from "../utils/ellipsoidTrailMaterialProperty";
// import { VcReadyObject } from "vue-cesium/es/utils/types";

const viewerRef = ref(null);

onMounted(() => {
  viewerRef.value.creatingPromise.then((readyObj) => {
    console.log(readyObj.Cesium); // Cesium namespace object
    console.log(readyObj.viewer); // instanceof Cesium.Viewer
  });
});

const onViewerReady = (readyObj) => {
  const Cesium = readyObj.Cesium;
  console.log("Cesium.BoxGeometry", Cesium.BoxGeometry.fromDimensions); // Cesium namespace object
  console.log(readyObj.viewer); // instanceof Cesium.Viewer
  const scene = readyObj.viewer.scene;
  const viewer = readyObj.viewer;
  // 创建 ENU 转换矩阵后，再基于 ENU 转换矩阵作 Z 轴平移 500000 * 0.5 个单位
  const boxModelMatrix = Cesium.Matrix4.multiplyByTranslation(
    Cesium.Transforms.eastNorthUpToFixedFrame(
      Cesium.Cartesian3.fromDegrees(112.0, 23.0)
    ),
    new Cesium.Cartesian3(0.0, 0.0, 500000 * 0.5),
    new Cesium.Matrix4()
  );
  // 创建 Geometry 和 Instance
  const boxGeometry = Cesium.BoxGeometry.fromDimensions({
    vertexFormat: Cesium.VertexFormat.POSITION_NORMAL_AND_ST, // 注意这里，下面要细说
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
  });
  const boxGeometryInstance = new Cesium.GeometryInstance({
    geometry: boxGeometry,
    modelMatrix: boxModelMatrix, // 应用 ENU + 平移矩阵
  });

  // 准备 fabric shader 材质和外观对象
  const shader = `czm_material czm_getMaterial(czm_materialInput materialInput) {
  czm_material material = czm_getDefaultMaterial(materialInput);
  material.diffuse = vec3(0.1, 0.2, 0.1);
  material.specular = 1.0;
  material.shininess = 0.8;
  material.alpha = 0.6;
  return material;
}`;
  const appearance = new Cesium.MaterialAppearance({
    material: new Cesium.Material({
      fabric: {
        source: shader,
      },
    }),
  });

  var cyanEllipsoidInstance = new Cesium.GeometryInstance({
    geometry: boxGeometry,
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(
      Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(-100.0, 40.0)
      ),
      new Cesium.Cartesian3(0.0, 0.0, 150000.0),
      new Cesium.Matrix4()
    ),
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN),
    },
  });

  scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: cyanEllipsoidInstance,
      appearance: new Cesium.PerInstanceColorAppearance({
        translucent: false,
        closed: true,
      }),
    })
  );

  const createTaperedSphere = () => {
    const entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(108.8, 34.8, 1000),
      ellipsoid: {
        radii: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),
        material: new EllipsoidTrailMaterialProperty(
          {
            color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
            speed: 10.0,
          },
          Cesium
        ),
      },
    });
    viewer.zoomTo(entity);
  };

  createTaperedSphere();
};
</script>

<style scoped></style>
